{% extends "base.html" %}

<style>
    .avatar-preview {
        width: 50px;
        height: 50px;
        object-fit: cover;
        cursor: pointer;
    }

    .avatar-full {
        display: none;
        position: absolute;
        z-index: 1000;
        max-width: 300px;
        max-height: 300px;
        border: 2px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .avatar-preview:hover + .avatar-full {
        display: block;
    }
</style>

{% block content %}
<h1>通讯录名单</h1>

<!-- 添加每页条数选择器 -->
<div class="mb-3">
    <form method="post" enctype="multipart/form-data" class="form-inline">{% csrf_token %}
        <label for="per_page" class="mr-2">每页显示:</label>
        <select name="per_page" id="per_page" class="form-control form-control-sm" onchange="this.form.submit()">
            <option value="10" {% if request.GET.per_page == '10' %}selected{% endif %}>10条</option>
            <option value="20" {% if request.GET.per_page == '20' %}selected{% endif %}>20条</option>
            <option value="50" {% if request.GET.per_page == '50' %}selected{% endif %}>50条</option>
        </select>
    </form>
</div>

<table class="table">
    <thead>
        <tr>
            <th>头像</th>
            <th>部门</th>
            <th>姓名</th>
            <th>职位</th>
            <th>电话</th>
            <th>短号</th>
        </tr>
    </thead>
    <tbody>
        {% for contact in contacts %}
        <tr>
            <td>
                {{ contact|avatar_image|safe }}
                <div class='avatar-full'>
                    {{ contact|avatar_image|safe }}
                </div>
            </td>
            <td>{{ contact.department.name }}</td>
            <td>{{ contact.name }}</td>
            <td>{{ contact.position }}</td>
            <td>{{ contact.phone }}</td>
            <td>{{ contact.short_code }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="pagination">
    <span class="step-links">
        {% if contacts.has_previous %}
            <a href="?page=1">&laquo; 首页</a>
            <a href="?page={{ contacts.previous_page_number }}">上一页</a>
        {% endif %}

        <span class="current">
            第 {{ contacts.number }} 页 / 共 {{ contacts.paginator.num_pages }} 页
        </span>

        {% if contacts.has_next %}
            <a href="?page={{ contacts.next_page_number }}">下一页</a>
            <a href="?page={{ contacts.paginator.num_pages }}">末页 &raquo;</a>
        {% endif %}
    </span>
</div>
{% endblock %}